<template>
  <div class="permission-main">
    <a-card :bordered="false" title="权限列表">
      <div class="operate">
        <a-button type="dashed" style="width: 100%;margin-bottom:10px" icon="plus" @click="doAdd">添加</a-button>
      </div>
      <!-- <a-divider /> -->
      <a-table
        :loading="loading"
        :columns="columns"
        :dataSource="loadData"
        :rowKey="loadData => loadData.id"
        :pagination="false">
        <span slot="actions" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm title="确定删除吗?" @confirm="doDel(record)" @cancel="cancel" okText="确认" cancelText="取消">
            <a href="javascript:;">删除</a>
          </a-popconfirm>
        </span>
      </a-table>
      <a-modal :title="isadd==true?'新增权限':'编辑权限'" :width="800" v-model="visible" @ok="handleOk" @cancel="handleCancel">
        <a-form :form="mdl">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="权限路径">
            <a-input placeholder="请填写权限路径" v-model="mdl.action" id="no" />
          </a-form-item>

          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="权限名称">
            <a-input placeholder="请输入权限名称" v-model="mdl.name" id="permission_name" />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="(选填)父权限">
            <a-select style="width:100%" defaultValue="" v-model="mdl.pid" @change="handleChange" :allowClear="true">
              <a-select-option v-for="(item, index) in permissionList" :key="index" :value="item.pid">{{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </a-modal>
    </a-card>
  </div>
</template>

<script>
  import {
    getPermsList,
    doAddPermis,
    delPerms,
    editPerms
  } from '@/api/permission'
  export default {
    name: 'Permission',
    data () {
      return {
        isadd: false,
        visible: false,
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 5
          }
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 16
          }
        },
        form: this.$form.createForm(this),
        mdl: {
          action: '',
          name: '',
          pid: 0
        },
        // 表头
        columns: [{
            title: 'ID',
            key: 'id',
            dataIndex: 'id'
          },
          {
            title: '权限名称',
            key: 'name',
            dataIndex: 'name'
          },
          {
            title: '路径',
            key: 'action',
            dataIndex: 'action'
          },
          // {
          //   title: '可操作权限',
          //   dataIndex: 'actions',
          //   scopedSlots: {
          //     customRender: 'actions'
          //   }
          // }
          {
            title: '操作',
            width: '150px',
            // dataIndex: 'actions',
            scopedSlots: {
              customRender: 'actions'
            }
          }
        ],
        permissionList: [],
        loadData: [
          //   {
          //   action: 'dashboard',
          //   id: 6,
          //   name: '订单列表',
          //   children: [{
          //     action: 'dashboard2',
          //     id: 7,
          //     name: '订单列表2'
          //   }]
          // }
        ],
        loading: false,
        selectedRowKeys: [],
        selectedRows: []
      }
    },
    filters: {
      statusFilter (status) {
        const statusMap = {
          1: '正常',
          2: '禁用'
        }
        return statusMap[status]
      }
    },
    created () {
      this.getPermsList()
    },
    methods: {
      cancel (e) {
        console.log(e)
        this.$message.info('取消删除')
      },
      handleChange (value) {
        console.log(`selected ${value}`)
        this.mdl.pid = value
      },
      doDel (record) {
        console.log(record)
        if (record.children) {
          for (let g = 0; g < record.children.length; g++) {
            this.delPerms(record.children[g].id)
          }
          // this.delPerms(record.id)
        } else {
          this.delPerms(record.id)
        }
      },
      delPerms (val) {
        delPerms({
          menu_id: val
        }).then(res => {
          console.log('删除返回', res)
          if (res.code === 200) {
            this.$message.success('删除成功!')
            this.getPermsList()
            this.handleCancel()
          } else {
            this.$message.info(res.msg)
          }
        }).catch(err => {
          console.log(err)
          this.$message.error('删除失败!')
        })
      },
      doAddPermis (parameter) {
        doAddPermis(parameter).then(res => {
          // console.log('新增返回', res)
          if (res.code === 200) {
             this.handleCancel()
            this.$message.success('新增成功!')
            this.getPermsList()
          } else {
            this.$message.info(res.msg)
          }
        }).catch(err => {
          console.log(err)
          this.$message.error('新增失败!')
        })
      },
      getPermsList () {
        this.loading = true
        getPermsList({
          page: 1,
          pagesize: 9999
        }).then(res => {
          this.loading = false
          this.loadData = []
          this.permissionList = [{
            pid: 0,
            name: '该项为添加父权限,如需添加子权限请选择其他父权限'
          }]
          console.log('权限列表', res.data.data)
          for (const i in res.data.data) {
            this.loadData.push(res.data.data[i]) // 属性
            this.permissionList.push({
              pid: res.data.data[i].id,
              name: res.data.data[i].name
            })
          }
          for (const i in this.loadData) {
            if (this.loadData[i].data !== null) {
              this.loadData[i].children = []
              this.loadData[i].children.push(...this.loadData[i].data)
            }
          }
          console.log('this.loadData', this.loadData)
        }).catch(err => {
          console.log(err)
          this.loading = false
        })
      },
      handleCancel (e) {
        this.mdl = {}
        this.mdl.pid = 0
        this.visible = false
      },
      doAdd () {
        this.isadd = true
        this.visible = true
      },
      handleEdit (record) {
        this.isadd = false
        console.log(record)
        this.mdl = record
        this.mdl.menu_id = record.id
        // this.mdl.pid = record.id
        this.visible = true
      },
      handleOk () {
        if (!this.mdl.id) {
          this.doAddPermis(this.mdl)
        } else {
          editPerms(this.mdl).then(res => {
            console.log(res)
            if (res.code === 200) {
               this.handleCancel()
              this.$message.success('修改成功!')
              this.getPermsList()
            } else {
              this.$message.info(res.msg)
            }
          }).catch(err => {
            console.log(err)
            this.$message.error('修改失败!')
             this.handleCancel()
          })
        }
      },
      onChange (selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      toggleAdvanced () {
        this.advanced = !this.advanced
      }
    },
    watch: {}
  }
</script>
<style lang="less" scoped>
  .permission-main::v-deep {
    width: 100%;

    .ant-table-row.ant-table-row-level-1 {
      background-color: rgb(252, 252, 252);
    }
  }
</style>
